<template>
  <div class="desc-box flex-row-center-between bg-gray-1 flex1 fs14 br5">
    <div class="flex-row-center-left">
      <SvgIcon :width="24" :height="24" v-if="props.iconName" :name="props.iconName" />
      <span class="fs14 grey-text mgl10">{{ props.title }}</span>
    </div>
    <div class="flex-row-center-between">
      <el-link v-if="props.link" @click="toPageByPath">
        <span class="bold main-text fs18 mgr10">{{ props.count }}</span>
      </el-link>
      <div v-else class="bold fs18 mgr10">
        <div v-if="props.count?.includes('%')">
          <span v-if="props.count?.startsWith('-')" class="success-text">{{ props.count?.replace('%', '') }}</span>
          <span v-else class="error-text">{{ props.count?.replace('%', '') }}</span>
          <span v-if="props.count?.startsWith('-')" class="fs14 mgl5 success-text">%</span>
          <span v-else class="fs14 mgl5 error-text">%</span>
        </div>
        <span v-else>{{ props.count }}</span>
      </div>
      <span v-if="props.showUnit">个</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import router from '@/router'
  import type { LocationQueryRaw } from 'vue-router'

  interface IProps {
    iconName?: string
    title?: string
    count?: string
    showUnit?: boolean
    link?: boolean
    path?: string
    query?: LocationQueryRaw
  }

  const props = withDefaults(defineProps<IProps>(), {
    showUnit: true,
    link: false,
    query: () => ({})
  })

  /**----------------------------methods----------------------------------------------------------------------- */

  const toPageByPath = () => {
    if (!props.path) return
    router.push({
      path: props.path,
      query: props.query
    })
  }
</script>

<style scoped lang="less">
  .desc-box {
    padding: 12px 16px;
  }
</style>
